<template>
	<jk-dialog
		v-model="saveDialogState"
		title="分配角色"
		width="600px"
		:confirm-btn-loading="confirmBtnLoading"
		:show-content-loading="showContentLoading"
		@on-confirm="onConfirmButton"
		@on-cancel="onVisibleChange(false)"
		@on-visible-change="onVisibleChange"
	>
		<el-row class="all-select-check">
			<el-col :span="8">
				<el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="onCheckAllChange">全选</el-checkbox>
			</el-col>
			<el-col :span="8" class="avatar-info">
				<el-avatar size="medium" icon="el-icon-user-solid"></el-avatar>
				<span class="">{{ targetName }}</span>
			</el-col>
			<el-col :span="8" class="flex-end-center">
				<el-tag>已选: <span class="selected-count">{{ checkedRoleIds.length }}</span> 个</el-tag>
			</el-col>
		</el-row>
		<div class="permission-box">
			<div class="permission-box-inner">
				<el-checkbox-group
					v-model="checkedRoleIds"
					size="small"
					@change="onCheckedChange"
				>
					<div v-for="(role) in roleOptions" :key="role.id" style="width: calc(100% / 5);padding: 2px;box-sizing: border-box;display: inline-block">
						<el-checkbox style="width: 100%;margin: 0;" border :label="role.id">{{ role.name }}</el-checkbox>
					</div>
				</el-checkbox-group>
			</div>
		</div>
	</jk-dialog>
</template>
<script>
    import { listSimpleRoles } from '../../../api/system/role';
    import { assignUserRole, listUserRoles } from '../../../api/system/permission';
    export default {
        props: {
            dialogState: {
                type: Boolean,
                default: false
            },
            targetName: {
                type: String,
                default: ''
            },
            dataId: {
                type: Number,
                default: null
            }
        },
        data() {
            return {
                isIndeterminate: true,
                checkAll: false,
                checked: [],
                roleOptions: [],
                showContentLoading: false,
                saveDialogState: false,
                confirmBtnLoading: false,
                checkedRoleIds: []
            };
        },
        watch: {
            dialogState(newVal) {
                this.saveDialogState = newVal;
                if (newVal) {
                    this.getDependentData();
                }
            }
        },
        methods: {
            onCheckAllChange(val) {
                const arr = [];
                this.roleOptions.forEach(item => {
                    arr.push(item.id);
                });
                this.checkedName = val ? arr : [];
                this.isIndeterminate = false;
            },
            onCheckedChange(value) {
                this.setAllCheckState(value, this.roleOptions);
            },
            setAllCheckState(checkIds, allModule) {
                if (!checkIds.length) {
                    this.isIndeterminate = false;
                    this.checkAll = false;
                } else if (checkIds.length === allModule.length) {
                    this.isIndeterminate = false;
                    this.checkAll = true;
                } else {
                    this.isIndeterminate = true;
                    this.checkAll = true;
                }
            },
            // 获得角色列表
            getRoleListRequest() {
                return listSimpleRoles().then(res => {
                    if (res.data.status === 200) {
                        this.roleOptions = [...res.data.res];
                    }
                });
            },
            // 获得该用户已绑定的角色集合
            getUserHasRoleListRequest() {
                return listUserRoles(this.dataId).then(res => {
                    if (res.data.status === 200) {
                        this.checkedRoleIds = res.data.res;
                    }
                });
            },
            async getDependentData() {
                this.showContentLoading = true;
                await this.getRoleListRequest();
                await this.getRoleListRequest();
                if (this.dataId) await this.getUserHasRoleListRequest();
                this.showContentLoading = false;
            },
            onVisibleChange(e) {
                if (!e) {
                    Object.assign(this.$data, this.$options.data());
                }
                this.$emit('on-visible-change', e);
            },
            saveRequest() {
                this.confirmBtnLoading = true;
                assignUserRole({
                    userId: this.dataId,
                    roleIds: this.checkedRoleIds
                }).then(res => {
                    this.confirmBtnLoading = false;
                    if (res.data.status === 200) {
                        this.$tipsBar(this, 'save');
                        this.$emit('on-confirm');
                    }
                });
            },
            onConfirmButton() {
                this.saveRequest();
            }
        }
    };
</script>
<style scoped lang="scss">
.avatar-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    margin-bottom: 6px;
    font-size: 14px;
}
.all-select-check {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 4px;
    .selected-count {
        font-size: 16px;
        font-weight: 700;
    }
}

.all-select-check >>> .el-checkbox__label {
    font-weight: 600 !important;
}
</style>
